@import './var.scss';


// test
// html {
//   background: $topColor;
// }

// 写类 命名方式

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-space-arount {
  justify-content: space-around;
}

.flex-space-between {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.flex-end {
  justify-content: flex-end;
}

.text-center {
  text-align: center;
}



.ml-05 {
  margin-left: 0.5% !important;
}

.ml-1 {
  margin-left: 1% !important;
}

.ml-2 {
  margin-left: 2% !important;
}

.ml-3 {
  margin-left: 3% !important;
}

.mr-1 {
  margin-right: 1% !important;
}

.mt-1 {
  margin-top: 1% !important;
}

.mt-2 {
  margin-top: 2% !important;
}

.mt-3 {
  margin-top: 3% !important;
}
.mt-4 {
  margin-top: 4% !important;
}
.mb-3 {
  margin-bottom: 3% !important;
}


.pd-1 {
  padding: 0 1%;
  box-sizing: border-box;
}

.w-25per {
  width: 25%;
}

.w-50per {
  width: 50%;
}

.w-75per {
  width: 75%;
}

.w-full {
  width: 100%;
}

.w-safe-1174 {
  width: $w-safe-1174;
  margin: 0 auto;
}

.w-safe {
  width: $w-safe;
  margin: 0 auto;
}

.w-314 {
  width: $w-314;
}

.w-168 {
  width: $w-168;
}
.w-220 {
  width: $w-220;
}

.h-full {
  height: 100%;
}

.h-74 {
  height: $font-74;
}

.h-52 {
  height: $h-52;
}

.font-12 {
  font-size: $font-12;
}

.font-16 {
  font-size: $font-16;
}

.font-22 {
  font-size: $font-22;
}

.font-23 {
  font-size: $font-23;
}

.font-40 {
  font-size: $font-40;
}

.font-74 {
  font-size: $font-74;
}

.font-32 {
  font-size: $font-32;
}

// 字体颜色

.font-fff {
  color: $font-fff;
}

.font-000 {
  color: $font-000;
}

.font-ccc {
  color: $font-ccc
}



// header
.h-28 {
  height: $h-28;
}

.top-bg {
  background: $topColor;
}

.bg-fff {
  background: #fff;
}


.hover-btn-004FA2 {
  color: $btn-004FA2;
}

.p-absolute {
  width: $w-full;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 111;
}

.p-relative {
  position: relative;
}

// header
.hover {
  a {
    border-bottom: 3px solid $font-fff;

    &:hover {
      color: $btn-004FA2;
      border-bottom: 3px solid $btn-004FA2
    }
  }
}

//phone

.foot-space {
  letter-spacing: 1em;
}


.draw {
  height: $h-7;
  .dot{
    display: inline-block;
    width: $h-7;
    height: $h-7;
    border-radius: $w-50per;
    background: $btn-004FA2;
  }
  .line {
    display: inline-block;
    height: $h-7;
    width: $w-80;
    border-radius: $h-7;
    background: $btn-004FA2;
  }
}